<template>
  <header :class="['top', { scrolled : scroll } ]">
    <b-navbar toggleable="md" type="light" variant="#fff">
      <Logo />
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="ml-auto">
          <b-navbar-nav>
            <b-nav-item v-for="val in menuList" :key="val.name" :to="{path: val.code}">
              <div class="nav-link-content" :style="{'color': tabs == val.code ? '#F57033' : ''}">
                {{ val.name }}
                <div class="bottom-line">
                  <div class="bottom-line-color" v-show="tabs == val.code"></div>
                </div>
              </div>
            </b-nav-item>
          </b-navbar-nav>
        <a class="btnMerchant" href="https://mms.dingdingzn.com/" target="_blank">商家运营平台</a>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </header>
</template>
<script>
import $ from 'jquery'
export default {
  data () {
    return {
      menuList: [
        { name: '首页', code: '/' },
        { name: '产品及服务', code: '/product' },
        { name: '解决方案', code: '/solve' },
        { name: '资讯动态', code: '/news/1' },
        { name: '关于我们', code: '/about' }
      ],
      tabs: 'index',
      scroll: false
    }
  },
  watch: {
    $route (n, o) {
      this.tabs = this.nameFormat(this.$route.path)
    }
  },
  computed: {
    nameFormat () {
      return (val) => {
        if (/product/.test(val)) {
          return '/product'
        } else if (/news/.test(val)) {
          return '/news/1'
        } else {
          return val
        }
      }
    }
  },
  mounted () {
    this.tabs = this.nameFormat(this.$route.path)
    $(document).scroll(() => {
      this.scroll = $(document).scrollTop() > 800
    })
  },
  methods: {
  }
}
</script> 

<style lang="sass" scoped>
.scrolled
  box-shadow: 0 0 0 1px #EEEEEE
.top
  padding: 0
  @media screen and (max-width: 750px)
    width: 100vw
    height: 56px
    background: #FFF
    position: fixed
    z-index: 2000
  @media screen and (min-width: 750px)
    min-width: 100vw
    height: 64px
    background: #FFF
    position: fixed
    z-index: 2000
.navbar
  @media screen and (min-width: 750px)
    padding: 0 !important
    width: 1180px
    margin: 0 auto
.nav-bar
  display: flex
  flex-direction: row
.nav-link-content
  color: #282C32
  text-align: center
  font-size: 14px
  text-decoration: none
  height: 60px
  line-height: 60px
  @media screen and (max-width: 750px)
    width: 24vw
  @media screen and (min-width: 750px)
    width: 100%
.bottom-line
  @media screen and (max-width: 750px)
    width: 24vw
  @media screen and (min-width: 750px)
    width: 100%
  height: 4px
  .bottom-line-color
    background: #F57033
    width: 100%
    height: 4px
    border-radius: 2px
.active
  color: orange
.btnMerchant
  display: block
  text-decoration: none
  height: 32px
  line-height: 16px
  color: #F57033
  font-size: 14px
  padding: 8px 16px
  border: 1px #F57033 solid
  border-radius: 4px
  cursor: pointer
  margin-left: 18px
  margin-top: 14px
  &:hover
    background: #F5703330
  @media screen and (max-width: 750px)
    width: 140px
    font-size: 14px
    text-align: center
    display: none
</style>
<style lang="sass">
.nav-item
  padding: 0 8px
  height: 64px
  &:hover .nav-link-content
    color: #F57033
    cursor: pointer
  .nav-link
    padding: 0
    height: 64px
#nav-collapse
  @media screen and (max-width: 750px)
    background: #FFF
    box-shadow: 0px 10px 10px rgba(19, 27, 39, 0.1)
    border-radius: 4px
</style>
